<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>InSEAM Annotator</title>
        <link type="text/css" href="css/redmond/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
        <link rel="stylesheet" href="OpenLayers/theme/default/google.css" type="text/css">
        <link type="text/css" href="css/main.css" rel="stylesheet" />
        <script src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script>
        <script src="./js/jquery-1.5.1.min.js"></script>
        <script src="js/jquery-ui-1.8.14.custom.min.js"></script>
        <script src="js/jsper1.1.3.js"></script>
        <script src="./js/json2.js"></script>
        <script src="./js/jquery.loadMapState.js"></script>
        <script src="OpenLayers/OpenLayers.js"></script>
        <script src="./js/inseam_main.js"></script>
        <script src="./js/inseam_annotation_main.js"></script>
	<script type="text/javascript">
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-787904-9']);
	  _gaq.push(['_trackPageview']);
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	</script>
    </head>
    <body>
        <div id="page">
            <div id="info">
                <div id="instructions">
                    <h4>
                    <a href="#">InSEAM Annotator Instructions</a>
                    </h4>
                    <div>
                        <ol>
                            <li>
                                <p>
                                    Add a point, line, or polygon to the map by first choosing one of the three tools at the top of the screen, and then drawing directly onto the map.  Lines and polygons can be complex shapes, consisting of many points, and are completed by double-clicking the mouse.
                                </p>
                            </li>
                            <li>
                                <p>
                                    Continue to add shapes.  Or, to delete a feature, hover the mouse pointer over the shape and press the
                                    <i>Delete</i> key on the keyboard.
                                </p>
                            </li>
                            <li>
                                <p>
                                    Click the
                                    <input class="small-button save" type="button" value="Save" />
                                    button to store your current map in the database.
                                </p>
                            </li>
                            <li>
                                <p>
                                    To start a new map, click the
                                    <input class="small-button reset" type="button" value="Reset Map" />
                                    button.  Remember to save first; all unsaved data will be lost.
                                </p>
                            </li>
                        </ol>
                        <p>
                            <strong>Viewing Data</strong>
                        </p>
                        <p>
                            You can view all the annotations that other users have submitted by visiting the
                            <a href="./inseam_explorer.html">map explorer</a>.
                        </p>
                    </div>
                </div>
                <div id="controls">
                    <strong>InSEAM Annotator Controls:</strong>
                    <input class="small-button save" type="button" value="Save" />
                    <input class="small-button reset" type="button"  value="Reset Map" />
                    <span id="welcome-message" class="floatright">
                    </span>
                    <div class="clear"></div>
                </div>
            </div>
            <div id="map_div" style="width: 100%; height: 100%;">
            </div>
        </div>
    </body>
</html>
